<!DOCTYPE html>
<html lang="zh"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 布局展示</title>
</head>

<body>
    <div>
        <h2>设置在容器上</h2>
        <h3>flex-direction</h3>
        <h4>row</h4>
        <div class="box box-1">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>row-reverse</h4>
        <div class="box box-2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>column</h4>
        <div class="box box-3">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>column-reverse</h4>
        <div class="box box-4">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>flex-wrap</h3>
        <h4>nowrap</h4>
        <div class="box box-5">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
        <h4>wrap</h4>
        <div class="box box-6">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
        <h4>wrap-reverse</h4>
        <div class="box box-7">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
        <h3>justify-content</h3>
        <h4>flex-start</h4>
        <div class="box box-8">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>flex-end</h4>
        <div class="box box-9">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>center</h4>
        <div class="box box-10">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>space-between</h4>
        <div class="box box-11">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>space-around</h4>
        <div class="box box-12">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>space-evenly</h4>
        <div class="box box-13">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>align-items</h3>
        <h4>stretch</h4>
        <div class="box box-14">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>flex-start</h4>
        <div class="box box-15">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>flex-end</h4>
        <div class="box box-16">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h4>center</h4>
        <div class="box box-17">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </div>
    <div>
        <h2>设置在项目上</h2>
        <h3>order</h3>
        <div class="box box-18">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>flex-grow</h3>
        <div class="box box-19">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>flex-shrink</h3>
        <div class="box box-20">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>flex-basis</h3>
        <div class="box box-21">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>flex</h3>
        <div class="box box-22">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <h3>align-self</h3>
        <div class="box box-23">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </div>

<style>
    h4 {
        margin: 0;
    }

    .box {
        margin: 5px 0;
        border: 1px solid #bce8f1;
        background: #D9EDF7;
        display: flex;
    }

    .item {
        width: 30px;
        height: 30px;
        margin: 5px;
        text-align: center;
        line-height: 30px;
        background: #479b62;
        color: #fff;
    }

    .box-1 {
        flex-direction: row;
    }

    .box-2 {
        flex-direction: row-reverse;
    }

    .box-3 {
        flex-direction: column;
    }

    .box-4 {
        flex-direction: column-reverse;
    }

    .box-5 {
        width: 200px;
        flex-wrap: nowrap;
    }

    .box-6 {
        width: 200px;
        flex-wrap: wrap;
    }

    .box-7 {
        width: 200px;
        flex-wrap: wrap-reverse;
    }

    .box-8 {
        justify-content: flex-start;
    }

    .box-9 {
        justify-content: flex-end;
    }

    .box-10 {
        justify-content: center;
    }

    .box-11 {
        justify-content: space-between;
    }

    .box-12 {
        justify-content: space-around;
    }

    .box-13 {
        justify-content: space-evenly;
    }

    .box-14,
    .box-15,
    .box-16,
    .box-17 {
        height: 70px;
    }

    .box-14 {
        align-items: stretch;
    }

    .box-14 .item {
        height: auto;
    }

    .box-15 {
        align-items: flex-start;
    }

    .box-16 {
        align-items: flex-end;
    }

    .box-17 {
        align-items: center;
    }

    .box-18 :nth-child(2) {
        order: -1
    }

    .box-19 :nth-child(2) {
        flex-grow: 1
    }

    .box-21 :nth-child(2) {
        flex-basis: 45px;
    }

    .box-22 .item {
        flex: auto
    }

    .box-23 {
        height: 90px;
    }

    .box-23 .item {
        align-items: flex-start;
        height: 30px;
    }

    .box-23 :nth-child(2) {
        align-self: flex-end
    }
</style>


</body></html>